<template>
	<div class="after">
		<!-- 科目 -->
		<el-card class="box-card" v-for="(item,index) in fileList" :key="index">
		    <template #header>
		      <div class="card-header">
		        <span>{{item.courseName}}</span>
				<el-button class="button" @click="GoTest(item.courseId)" text>考试查询</el-button>
		        <el-button class="button" @click="toSeeWork(item.id)" text>查看作业</el-button>
		      </div>
		    </template>
		    <div v-for="(obj,leng) in fileList[index].files" :key="leng" class="text item">
				 <el-link :href="`http://localhost:9090/student/getKj/`+obj.id" target="_blank">{{obj.fileName}}</el-link>
			</div>
<!-- 			<div v-if="fileList[index].files.length<0">
				没有哦
			</div> -->
		  </el-card>
	</div>
</template>

<script>
	export default {
		created() {
			this.selectFileListAndCourse()
		},
		data(){
			return{
				fileList:[]
			}
		},
		methods:{
			toSeeWork(ctid){
				this.$router.push({
					path:"/student/work",
					query:{ctId:ctid}
				})
			},
			GoTest(courseId){
				//跳转到测试页面
				this.$router.push({
					path:"/studentTest",
					query:{course:courseId}
				})
			},
			selectFileListAndCourse(){
				//获取当前登陆学生班级拥有的课程
				let user = JSON.parse(localStorage.getItem("user"));
				this.request.get("/student/getCourse/"+user.id).then(resp=>{
					console.log(resp.data)
					this.fileList = resp.data
				})
			}
		}
	}
</script>

<style>
	html, body {
	    width: 100%;
	    height: 100%;
	    background-color: rgb(60, 60, 68);
	}
	.card-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.text {
	  font-size: 14px;
	}
	.after:after{
		content: '';
		display: block;
		clear: both;
	}
	.item {
	  margin-bottom: 18px;
	}
	
	.box-card {
	  margin: 20px;
	  width: 480px;
	  float: left;
	}
</style>